<template>
  <div class="view-all">
      <map3D class="map" :markers="markers"/>
      <div class="maincontent">
        <div>
          <img :src="imgLogo" class="logo" v-if="showLogo"/>
          <span class="top_logo_text">多流域坝群健康在线监控和综合诊断平台</span>
        </div>
        <div class="right-menu dropClass">
          <span id="welcome" class="el-dropdown-link">
            欢迎您，{{ userName }}
          </span>
          <a class="logOut" @click="dropClick">退出登录</a>
        </div>
      </div>
      <div class="arcgis-box">
        <el-button type="primary" class="elBtn" @click="inside" size="small">内部坝群({{totalCount}})</el-button>
        <el-button type="primary" class="elBtn" disabled size="small">外部坝群(预留)</el-button>
      </div>
  </div>
</template>
<script>
import {GetCount,GetStationByLoginUser} from '../api/https'
import map3D from '@/components/page/map.vue'
export default {
  name:'Home',
  components:{map3D},
  data(){
    return{
      showLogo:false,
      imgLogo:require('@/assets/image/logo.png'),
      userName:'',
      totalCount:'',
      markers:[],
      mouseMoveHandler: null,
      mouseOutHandler: null
    }
  },
  mounted() {
    const url = window.location.href
    if(url.startsWith('http://10.100.252.33')){
      this.showLogo = true
    }else{
      this.showLogo = false
    }
    this.userName = localStorage.getItem('userName');

    // 获取电站数量
    GetCount().then(res=>{
      if(res.isSuccess){
        res.data.forEach(item=>{
          if(item.InSide == 1){
            this.totalCount = item.TotalCount
          }
        })
      }
    })
    this.loadMarkers()
  },
  beforeDestroy() {
    this.markers = [];
  },
  methods:{
    loadMarkers() {
      GetStationByLoginUser().then(res => {
        if (res.isSuccess && res.data && res.data.length > 0) { 
          const _list = [];
          res.data.forEach(item => {
            if (item.location) {
              const location = item.location.split(',').map(Number);
              if (location.length === 2 && !isNaN(location[0]) && !isNaN(location[1])) {
                _list.push({
                  name: item.stationName,
                  lng: location[0],
                  lat: location[1],
                  img: item.imgs && item.imgs.length > 0 ? item.imgs[0].img_path : null,
                  reservoirCapacity: item.reservoirCapacity,
                  damCategory: item.damCategory,
                  damHeight: item.damHeight,
                  installation: item.installation,
                  productionTime: item.productionTime,
                  status: item.status == 1 ? '已接入' : '未接入'
                });
              }
            }
          });
          this.markers = _list;
        } else {
          this.markers = [];
        }
      }).catch(() => {
        this.markers = [];
      });
    },
    dropClick() {
      sessionStorage.clear()
      this.$router.push(`/login`);
    },
    inside() {
      this.$router.push({ path: "/index/basin" });
    },
  }
}
   
</script>

<style lang="scss" scoped>
.view-all{
  width:100%;
  height: 100vh;
  position: relative;
}
.map{
  position: absolute;
  top:0px;
  left:0;
  z-index:9; 
}
.maincontent{
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  position: absolute;
  top:0;
  left:0;
  z-index: 99;
  .logo{
    width:120px;
    vertical-align: middle;
    margin-top:-10px;
  }
  .top_logo_text{
    font-size: 23px;
    color: #3e8bfc;
    line-height: 60px;
    margin-left: 10px;
    font-weight:bold;
  }
  .right-menu{
    color:#3e8bfc;
    line-height: 60px;
    font-weight:bold;
  }
}
.arcgis-box{
  position: absolute;
  top:66px;
  right:10px;
  z-index:9; 
}

.logOut{
  margin-left:20px;

}

</style>


